import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/src/simple/get_state.dart';
import 'package:sp_util/sp_util.dart';
import 'package:yp/config/config.dart';
import 'package:yp/config/style.dart';
import 'package:yp/pages/trolley/go_exchange/logic.dart';
import 'package:yp/widgets/navigation_bar.dart';

import '../../../helper.dart';
import '../../../router.dart';

class GoExchange extends StatefulWidget {
  GoExchange({Key key}) : super(key: key);

  @override
  _GoExchangeState createState() => _GoExchangeState();
}

class _GoExchangeState extends State<GoExchange> {
  final Color defaultColor = const Color(0xffEA5504);

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: YPNavigationBar(
        '加价购商品选择',
        backgroundColor: EsColors.White,
        titleColor: EsColors.TitleSecondary,
      ),
      body: GetBuilder<GoExchangeLogic>(
        init: GoExchangeLogic(),
        builder: (logic) {
          final exchangeList = logic.state.exchangeList;
          return Container(
            height: size.height,
            child: Column(
              children: [
                Container(
                  color: defaultColor,
                  width: size.width,
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Text(
                    logic.state.cornerDetail,
                    textAlign: TextAlign.center,
                    style: TextStyle(color: const Color(0xffffffff)),
                  ),
                ),
                Expanded(
                  child: exchangeList.length > 0
                      ? SingleChildScrollView(
                          child: Container(
                            alignment: Alignment.topLeft,
                            child: Wrap(
                              alignment: WrapAlignment.spaceBetween,
                              children:
                                  List.generate(exchangeList.length, (index) {
                                final double cardWidth = (size.width - 60) / 2;
                                return Container(
                                  width: cardWidth,
                                  margin: const EdgeInsets.only(
                                      left: 15, right: 15, top: 15),
                                  child: InkWell(
                                    onTap: () {
                                      // 详情
                                      Get.toNamed(RouteConfig.goodsDetail,
                                          arguments: {
                                            'itemNumId': exchangeList[index]
                                                    ['item_num_id']
                                                .toString(),
                                            'styleNumId': exchangeList[index]
                                                    ['style_num_id']
                                                .toString(),
                                            // 'shopId':
                                            //     SpUtil.getInt('storeShopNum')
                                            //         .toString(),
                                            'shopId': SpUtil.getObject(Config
                                                    .GET_SHOP_INFO)['shop_id']
                                                .toString(),
                                            'ecStyleNumId': exchangeList[index]
                                                    ['ec_style_num_id']
                                                .toString(),
                                            'typeIndex': exchangeList[index]
                                                    ['is_pre_sale'] ??
                                                0
                                          });
                                    },
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Container(
                                          color: const Color(0xffEFEFEF),
                                          height: cardWidth,
                                          width: cardWidth,
                                          alignment: Alignment.center,
                                          child: Image.network(
                                            '${exchangeList[index]['image_default_id']}?x-image-process=image/resize,h_160,w_160/quality,q_50/imageslim',
                                            height: cardWidth,
                                            width: cardWidth,
                                            fit: BoxFit.fill,
                                          ),
                                        ),
                                        Container(
                                          margin: const EdgeInsets.only(top: 5),
                                          child: Text(
                                            exchangeList[index]['title'],
                                            overflow: TextOverflow.ellipsis,
                                            // style: TextStyle(fontSize: 16),
                                          ),
                                        ),
                                        Container(
                                          alignment: Alignment.centerLeft,
                                          margin: const EdgeInsets.only(
                                              top: 10, bottom: 10),
                                          child: Container(
                                            padding: EdgeInsets.only(
                                                left: 10,
                                                right: 10,
                                                bottom: 2,
                                                top: 0),
                                            decoration: BoxDecoration(
                                              border: Border.all(
                                                  color: defaultColor),
                                              borderRadius:
                                                  BorderRadius.circular(3),
                                            ),
                                            child: Text(
                                              '加价购',
                                              style: TextStyle(
                                                color: defaultColor,
                                                fontSize: 12,
                                              ),
                                            ),
                                          ),
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Row(
                                              children: [
                                                Text('￥',
                                                    style: TextStyle(
                                                      color: defaultColor,
                                                      fontSize: 12,
                                                    )),
                                                Text(
                                                    exchangeList[index]
                                                            ['depreciate']
                                                        .toString(),
                                                    style: TextStyle(
                                                      color: defaultColor,
                                                      fontSize: 18,
                                                    )),
                                              ],
                                            ),
                                            GestureDetector(
                                              onTap: () {
                                                logic.exchangeAddCard(
                                                    item: exchangeList[index]);
                                              },
                                              child: Image.asset(
                                                'assets/images/shoppingCart_image.png',
                                                width: setWidth(50),
                                                // color: state.TJlist[index]['style_store'] > 0
                                                //     ? Color(0xffEA5504)
                                                //     : Color(0xffcccccc),
                                                color: defaultColor,
                                                height: setWidth(50),
                                                fit: BoxFit.cover,
                                              ),
                                            )
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                );
                              }),
                            ),
                          ),
                        )
                      : Center(child: Text('暂无数据')),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 10),
                  child: commonTextRadiusBtn(
                      btnText: '返回购物车',
                      onTap: () {
                        Navigator.of(Get.context).pop();
                      }),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

Widget commonTextRadiusBtn({
  Color bgColor = const Color(0xffEA5504),
  TextStyle textStyle,
  double radius = 20,
  double height = 40,
  double width,
  Function onTap,
  double horizontal = 15,
  @required String btnText,
}) {
  return InkWell(
    onTap: onTap,
    child: Container(
      height: height,
      width: width != null ? width - horizontal * 2 : null,
      alignment: Alignment.center,
      margin: EdgeInsets.symmetric(horizontal: horizontal),
      decoration: BoxDecoration(
          color: bgColor, borderRadius: BorderRadius.circular(radius)),
      child: Text(
        btnText,
        style: textStyle ??
            TextStyle(
              color: const Color(0xffffffff),
              fontSize: 16,
            ),
      ),
    ),
  );
}
